<template>
  <div class="page-c play play2">
    <div class="text">
      <h3>{{name}}</h3>
      <h4>{{singer}}</h4>
    </div>
    <div class="pic">
      <img :src="cover" :alt="cover" />
    </div>
    <div v-for="(item,index) in songurl" :key="index" class="music">
      <audio autoplay controls ref="audio">
        <source :src="item.url" type="audio/MP3" />
      </audio>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "Play2",
  components: {},
  data() {
    //这里存放数据
    return {
      id: "",
      urlid:"",
      songurl: [],
      cover: "",
      name: "",
      singer: ""
    };
  },
  methods: {
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.id = this.$route.params.id;
    this.urlid = this.$route.params.urlid;
    this.$axios
      .all([
        this.$axios({
          url: this.$URL.BASE_URL + "/song/url",
          params: {
            id: this.urlid
          }
        }),
        this.$axios({
          url: this.$URL.BASE_URL + "/dj/program/detail",
          params: {
            id: this.id
          }
        })
      ])
      .then(
        this.$axios.spread((res1, res2) => {
          this.songurl = res1.data.data;
          this.cover = res2.data.program.coverUrl;
          this.name = res2.data.program.name;
          this.singer = res2.data.program.dj.nickname;
        })
      );
  }
};
</script>
<style lang='scss' scoped>
.pic {
  margin: 50px auto;
  border-radius: 50%;
  overflow: hidden;
  width: 260px;
  height: 260px;
  img {
    width: 100%;
  }
}
@mixin animation($val) {
	animation:$val;
	-webkit-animation:$val;
	-moz-animation:$val;
	-ms-animation:$val;
}
.text {
  margin-top: 20px;
  text-align: center;

  h3 {
    font-size: 18px;
    font-weight: normal;
  }
  h4 {
    font-weight: lighter;
    font-size: 13px;
  }
}
.music {
  text-align: center;
}

//@import url(); 引入公共css类
</style>